﻿<div style="position: relative; width: 100%; height: 100%" class="jsonEditor">
    <div style="float: left; width: 250px; overflow: auto; position: absolute; top: 0px;
        bottom: 0px; left: 0px">
        <div id="jExamples">
            <h2>
                Json sources:</h2>
            <select name="jloadExamples" onchange="JSONeditor.loadExample(this.value)">
                <option value="None">None</option>
                @{
                    foreach (var item in Model)
                    {
                    <option value="@item">@item</option>
                    }
                }
            </select>
        </div>
        <hr />
        <div id="tree">
        </div>
    </div>
    <div style="float: left; overflow: auto; position: absolute; top: 0px; bottom: 0px;
        left: 255px; right: 0px;">
        <div id="jform">
            <form action="\" name="jsoninput" onsubmit="return treeBuilder.jsonChange(this)">
            <h2>
                Label:</h2>
            <input name="jlabel" type="text" value="" size="60" style="width: 400px;">
            <h2>
                Value:
            </h2>
            <textarea name="jvalue" rows="10" cols="50" style="width: 400px; height: 150px"></textarea>
            <h2>
                Data type:
            </h2>
            <select onchange="treeBuilder.changeJsonDataType(this.value,this.parentNode)" name="jtype">
                <option value="object">object</option>
                <option value="array">array</option>
                <option value="function">function</option>
                <option value="string">string</option>
                <option value="number">number</option>
                <option value="boolean">boolean</option>
                <option value="null">null</option>
                <option value="undefined">undefined</option>
            </select>
            <input name="orgjlabel" type="hidden" value="json" style="width: 400px">
            <input onfocus="this.blur()" type="submit" value="Set">
            <br />
            <input name="jAddChild" onfocus="this.blur()" type="button" onclick="treeBuilder.jsonAddChild(this.parentNode)"
                value="Add child">
            <input name="jAddSibling" onfocus="this.blur()" type="button" onclick="treeBuilder.jsonAddSibling(this.parentNode)"
                value="Add sibling">
            <input name="jRemove" onfocus="this.blur()" type="button" onclick="treeBuilder.jsonRemove(this.parentNode)"
                value="Delete">
            <input name="jRename" onfocus="this.blur()" type="button" onclick="treeBuilder.jsonRename(this.parentNode)"
                value="Rename">
            <input name="jCut" onfocus="this.blur()" type="button" onclick="treeBuilder.jsonCut(this.parentNode)"
                value="Cut">
            <input name="jCopy" onfocus="this.blur()" type="button" onclick="treeBuilder.jsonCopy(this.parentNode)"
                value="Copy">
            <input name="jPaste" onfocus="this.blur()" type="button" onclick="treeBuilder.jsonPaste(this.parentNode)"
                value="Paste">
            <br />
            <input type="checkbox" name="jbefore">Add children first/siblings before
            <br />
            <input type="checkbox" name="jPasteAsChild">Paste as child on objects & arrays
            <br />
            <div id="jformMessage" style="background: green; color: Yellow;">
            </div>
            </form>
            <hr />
            <input type="button" value="UPLOAD" style="width: 200px" id="btnSaveJson" />
        </div>
    </div>
</div>
